<template>
    <div class="question_chart" ref="EmployeeType"></div>
</template>
<script>
import resize from '@/mixins/resize';
import echarts from 'echarts';
import {remoteEmployeeTypeList} from '@/api/dashboard'

export default {
    name: 'EmployeeType',
    mixins: [resize],
    props: {
        info: {
            type: Object,
            default: () => {}
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.initEchart();
        });
    },
    methods: {
        async initEchart() {
            let res = await remoteEmployeeTypeList();
            let {data}=res;
            const showData = [];
            let total = 0;
            data.forEach((item, index) => {
                total += item.cnt;
            });
            let counts =[]
            const colors = ['#4499E4', '#00BB96', '#FAC858'];
            const indicator = [];
            data.map((item,index)=>{
                indicator.push({
                    name:item.workType,
                    max:total
                })
                counts.push(item.cnt)
                
            })
            showData.push({
                    value: counts,
                    name: '工种',
                    areaStyle: {
                        normal: {
                            color: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(46,203,255, 0.14)' // 0% 处的颜色
                                    },
                                    {
                                        offset: 0.15,
                                        color: 'rgba(46,203,255, 0.14)' // 100% 处的颜色
                                    },
                                    {
                                        offset: 0.75,
                                        color: '#057FB3' // 100% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: '#078DC6' // 100% 处的颜色
                                    }
                                ],
                                global: false // 缺省为 false
                            }
                        }
                    },
                    itemStyle: {
                        // 折线拐点标志的样式。
                        normal: {
                            // 普通状态时的样式
                            lineStyle: {
                                width: 1
                            },
                            opacity: 0.3
                        },
                        emphasis: {
                            // 高亮时的样式
                            lineStyle: {
                                width: 5
                            },
                            opacity: 0
                        }
                    }
                })
            
            this.myChart = echarts.init(this.$refs.EmployeeType);

            this.myChart.setOption(
                {
                    tooltip: {
                        trigger: 'item'
                    },
                    title: {
                        text: '工种构成分析',
                        left: 'center',
                        bottom: '0',
                        textStyle: {
                            fontSize: 12,
                            color: '#17E2EF'
                        }
                    },
                    color: colors,
                    grid: {
                        left: 0,
                        right: 0,
                        top: 0,
                        bottom: 0,
                        containLabel: true
                    },
                    legend: {
                        bottom: '10%',
                        left: 'center',
                        itemHeight: 4,
                        itemWidth: 7,
                        itemGap: 5,
                        data: ['男', '女'],
                        textStyle: {
                            fontSize: 8,
                            color: '#fff'
                        },
                        selectedMode: false
                    },
                    radar: {
                        center: ['50%', '50%'], // 外圆的位置
                        radius: '50%',
                        nameGap: 2,
                        name: {
                            textStyle: {
                                color: '#0089F6',
                                fontSize: 8,
                                fontWeight: 400,
                                fontFamily: 'PingFangSC-Regular,PingFang SC',
                                fontStyle: 'italic'
                            }
                        },
                        // TODO:
                        indicator: indicator,
                        splitArea: {
                            // 坐标轴在 grid 区域中的分隔区域，默认不显示。
                            show: true,
                            areaStyle: {
                                // 分隔区域的样式设置。
                                color: ['#00224A', '#00224A', '#00224A', '#00224A', '#00224A'] // 画布颜色 // 分隔区域颜色。分隔区域会按数组中颜色的顺序依次循环设置颜色。默认是一个深浅的间隔色。
                            }
                        },
                        axisLine: {
                            // 指向外圈文本的分隔线样式
                            lineStyle: {
                                color: 'rgba(255,255,255,0.2)'
                            }
                        },
                        splitLine: {
                            lineStyle: {
                                type: 'solid',
                                color: ['#1781BA', '#1781BA'], // 分隔线颜色
                                width: 1 // 分隔线线宽
                            }
                        }
                    },
                    series: [
                        {
                            type: 'radar',
                            symbolSize: 5,
                            data: showData
                        }
                    ]
                },
                true
            );
        }
    }
};
</script>
<style lang="scss" scoped>
.question_chart {
    width: 100%;
    height: 100%;
}
</style>
